<%--
  Created by IntelliJ IDEA.
  User: 懒瑶瑶
  Date: 2022/5/27
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 500px;height:420px;"></div>
    <script>

        $(document).ready(function(){
            //echarts进行初始化
            var myChart = echarts.init(document.getElementById("main"));
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: []
                },
                legend: {
                    data:['数量(条)']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        color:['#ffaa33'],//设置图像颜色
                        type: 'bar'
                    }
                ]
            });
            //使用jQuery中的$.get()获取data.json文件，使用done函数;
            //done(function(data))中data表示调用的函数返回的数据
            $.get('${pageContext.request.contextPath}/emp/countMap').done(function(data){
                myChart.setOption({

                    xAxis:{
                        data:data.EmpName
                    },

                    series:{
                        name:"值班次数",
                        data:data.countNum,
                    }
                });
            });
        });
        myChart.setOption(option);
    </script>

</body>
</html>
